```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twenty - 现代化开源CRM解决方案</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #1a1a1a;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .highlight-card {
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .highlight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        .feature-icon {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0.1em 0;
            color: #6e8efb;
            font-weight: 700;
        }
        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #6e8efb;
            transition: width 0.3s;
        }
        .nav-link:hover:after {
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="fixed w-full bg-white shadow-sm z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-cube text-2xl mr-2 text-purple-600"></i>
                        <span class="text-xl font-bold text-gray-900">Twenty</span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="#problems" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">痛点解决</a>
                        <a href="#features" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">核心功能</a>
                        <a href="#scenarios" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">使用场景</a>
                        <a href="#advantages" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">优势特色</a>
                        <a href="#get-started" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">上手指南</a>
                        <a href="https://github.com/twentyhq/twenty" target="_blank" class="ml-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-200">
                            <i class="fab fa-github mr-2"></i> GitHub
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 模块 -->
    <div class="hero-gradient pt-32 pb-24 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">重新定义客户关系管理</h1>
                    <p class="text-xl mb-8 opacity-90">Twenty 是一个现代化的开源CRM平台，为中小企业、销售团队和开发者提供灵活、可定制的替代方案，挑战传统CRM的高成本和复杂性。</p>
                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                        <a href="https://app.twenty.com" target="_blank" class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-center transition-colors duration-200">
                            <i class="fas fa-rocket mr-2"></i> 试用Alpha版
                        </a>
                        <a href="#get-started" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-medium text-center transition-colors duration-200">
                            <i class="fas fa-book mr-2"></i> 上手指南
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753430134959-f131ec23-2e1d-447f-9000-b854a41a2558.png" alt="Twenty CRM界面" class="rounded-xl shadow-2xl border-8 border-white border-opacity-20 max-w-full h-auto">
                </div>
            </div>
        </div>
    </div>

    <!-- 痛点解决 -->
    <section id="problems" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">痛点解决</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Twenty 能解决什么问题？</h2>
                <div class="max-w-3xl mx-auto">
                    <p class="text-xl text-gray-600 drop-cap">传统CRM如Salesforce和HubSpot价格昂贵、定制复杂，且数据锁定导致企业难以摆脱供应商依赖。用户常面临界面陈旧、功能冗余、以及与现有系统集成困难的痛点。此外，隐私敏感的企业担心数据泄露风险。</p>
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-money-bill-wave text-4xl feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">高昂成本</h3>
                    <p class="text-gray-600">传统CRM订阅费用昂贵，中小企业难以负担。Twenty完全开源，大幅降低使用成本。</p>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-lock text-4xl feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">数据锁定</h3>
                    <p class="text-gray-600">供应商锁定问题严重。Twenty允许自托管，企业完全掌控自己的客户数据。</p>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-sliders-h text-4xl feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">定制困难</h3>
                    <p class="text-gray-600">传统CRM定制需要专业顾问。Twenty提供灵活的自定义选项，适应各种工作流程。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">核心功能</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">全面而强大的功能</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Twenty 提供了一套完善的CRM工具，满足您的业务需求</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="flex">
                    <div class="mr-4 mt-1">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600">
                            <i class="fas fa-database"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">灵活数据管理</h3>
                        <p class="text-gray-600">支持导入和存储大量客户数据，提供过滤、排序、分组、看板和表格视图，满足多样化需求。</p>
                    </div>
                </div>
                <div class="flex">
                    <div class="mr-4 mt-1">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600">
                            <i class="fas fa-sliders-h"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">高度可定制化</h3>
                        <p class="text-gray-600">允许调整布局、字段和对象，适应独特的工作流程，无需外部顾问。</p>
                    </div>
                </div>
                <div class="flex">
                    <div class="mr-4 mt-1">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600">
                            <i class="fas fa-project-diagram"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">强大API与Webhooks</h3>
                        <p class="text-gray-600">通过REST和GraphQL API与外部系统无缝集成，支持自动化和扩展。</p>
                    </div>
                </div>
                <div class="flex">
                    <div class="mr-4 mt-1">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2">富文本笔记</h3>
                        <p class="text-gray-600">支持Markdown格式的笔记，便于记录客户交互细节。</p>
                    </div>
                </div>
            </div>
            
            <!-- 数据可视化 -->
            <div class="bg-white p-6 rounded-xl shadow-sm">
                <div class="mermaid">
                    graph TD
                        A[Twenty CRM] --> B[数据管理]
                        A --> C[定制化]
                        A --> D[API集成]
                        A --> E[AI功能]
                        B --> B1[看板视图]
                        B --> B2[表格视图]
                        B --> B3[过滤排序]
                        C --> C1[字段定制]
                        C --> C2[布局调整]
                        C --> C3[工作流配置]
                        D --> D1[REST API]
                        D --> D2[GraphQL]
                        D --> D3[Webhooks]
                        E --> E1[智能搜索]
                        E --> E2[自动笔记]
                </div>
            </div>
        </div>
    </section>

    <!-- 使用场景 -->
    <section id="scenarios" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">使用场景</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Twenty 如何助力您的业务</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">适用于各种业务场景的创新CRM解决方案</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="mr-3">
                            <div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 text-purple-600">
                                <i class="fas fa-chart-line text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold">销售管道管理</h3>
                    </div>
                    <p class="text-gray-600 mb-4">销售团队使用Twenty的看板视图跟踪潜在客户，从初次接触到成交，确保不错过任何交易机会。</p>
                    <p class="text-purple-600 font-medium italic">你的销售流程是否需要更直观的管道管理？</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="mr-3">
                            <div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 text-purple-600">
                                <i class="fas fa-users text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold">客户数据整合</h3>
                    </div>
                    <p class="text-gray-600">中小企业通过Twenty的API将CRM与现有工具（如邮件系统或ERP）连接，统一管理客户数据。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="mr-3">
                            <div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 text-purple-600">
                                <i class="fas fa-tasks text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold">定制化工作流</h3>
                    </div>
                    <p class="text-gray-600">营销团队自定义字段和视图，跟踪活动效果和客户反馈，优化个性化营销策略。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 优势特色 -->
    <section id="advantages" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">优势特色</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">为何选择 Twenty？</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">与传统CRM相比的独特优势</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-2xl font-bold mb-6 text-purple-600">Twenty 优势</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">完全开源</h4>
                                <p class="text-gray-600 text-sm">基于AGPL v3许可证，允许自托管和修改，打破供应商锁定，社区驱动开发（29.4k星标）。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">现代化UX</h4>
                                <p class="text-gray-600 text-sm">借鉴Notion和Linear的界面设计，操作直观，优于传统CRM的复杂界面。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">隐私优先</h4>
                                <p class="text-gray-600 text-sm">本地部署确保数据安全，适合隐私敏感行业。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">生态扩展潜力</h4>
                                <p class="text-gray-600 text-sm">即将推出插件系统，未来可形成丰富生态。</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-2xl font-bold mb-6 text-gray-600">局限性</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">早期阶段</h4>
                                <p class="text-gray-600 text-sm">目前处于Alpha阶段，部分功能（如通知中心、自定义对象）仍在开发中，可能存在稳定性问题。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-bold">技术要求</h4>
                                <p class="text-gray-600 text-sm">本地部署需技术能力，包括Node.js、PostgreSQL和Redis的配置。</p>
                            </div>
                        </li>
                    </ul>
                    <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                        <p class="text-purple-800 font-medium"><i class="fas fa-lightbulb mr-2"></i> 提示：Twenty正在快速发展，许多功能正在持续改进中，可以关注GitHub仓库获取最新进展。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 上手指南 -->
    <section id="get-started" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">上手指南</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">快速开始使用 Twenty</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">几分钟内启动您的CRM系统</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-6">访问Alpha版</h3>
                    <div class="bg-gray-50 p-6 rounded-xl mb-8">
                        <p class="mb-4">快速体验Twenty的功能，无需安装：</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-globe text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <p class="font-medium">访问地址：</p>
                                    <a href="https://app.twenty.com" target="_blank" class="text-purple-600 hover:underline">https://app.twenty.com</a>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-user text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <p class="font-medium">测试账号：</p>
                                    <p>user@demo.twenty.com</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-key text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <p class="font-medium">密码：</p>
                                    <p>welcome@123</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <h3 class="text-2xl font-bold mb-6">使用门槛与成本</h3>
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <i class="fas fa-wallet text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-bold">访问方式</h4>
                                    <p class="text-gray-600">完全开源，免费使用，无需注册，直接从GitHub下载或访问app.twenty.com试用Alpha版。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-server text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-bold">环境要求</h4>
                                    <p class="text-gray-600">本地部署需Node.js（v20+）、PostgreSQL、Redis，建议16GB RAM。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-file-contract text-purple-600 mt-1 mr-3"></i>
                                <div>
                                    <h4 class="font-bold">高级版本</h4>
                                    <p class="text-gray-600">部分文件采用Twenty商业许可证，需企业版订阅（定价见<a href="https://twenty.com/legal/terms" target="_blank" class="text-purple-600 hover:underline">官方条款</a>）。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6">本地部署指南</h3>
                    <div class="bg-gray-900 text-gray-100 p-6 rounded-xl font-mono text-sm overflow-x-auto">
                        <div class="mb-4">
                            <p class="text-purple-400"># 克隆仓库</p>
                            <p class="text-white">git clone https://github.com/twentyhq/twenty</p>
                            <p class="text-white">cd twenty</p>
                        </div>
                        <div class="mb-4">
                            <p class="text-purple-400"># 安装依赖</p>
                            <p class="text-white">npm install</p>
                        </div>
                        <div class="mb-4">
                            <p class="text-purple-400"># 配置数据库</p>
                            <p class="text-white">psql postgres -c "CREATE DATABASE default;" -c "CREATE DATABASE test;"</p>
                        </div>
                        <div class="mb-4">
                            <p class="text-purple-400"># 设置Redis</p>
                            <p class="text-gray-500"># 安装Redis并配置环境变量（参考docs.twenty.com）</p>
                        </div>
                        <div class="mb-4">
                            <p class="text-purple-400"># 启动应用</p>
                            <p class="text-white">npm run dev</p>
                            <p class="text-gray-500"># 访问 http://localhost:3000</p>
                        </div>
                    </div>
                    
                    <div class="mt-8 bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-purple-500"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-purple-800">更多帮助</h3>
                                <div class="mt-2 text-sm text-purple-700">
                                    <p>详细文档请访问 <a href="https://docs.twenty.com" target="_blank" class="font-medium underline">docs.twenty.com</a>，或在GitHub仓库中提交问题。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动号召 -->
    <section class="py-16 hero-gradient text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-6">准备好开始您的CRM之旅了吗？</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">加入数千家已经选择Twenty的企业，体验现代化的开源CRM解决方案。</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
                <a href="https://github.com/twentyhq/twenty" target="_blank" class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors duration-200">
                    <i class="fab fa-github mr-2"></i> 访问GitHub
                </a>
                <a href="https://app.twenty.com" target="_blank" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-rocket mr-2"></i> 立即试用
                </a>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeVariables: {
                primaryColor: '#F5F3FF',
                primaryBorderColor: '#8B5CF6',
                primaryTextColor: '#1F2937',
                lineColor: '#8B5CF6',
                fontSize: '14px'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```